<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>特色产品管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--    搜索框-->
    <div class="ok-box-center-right">
      <el-form :inline="true" :model="ok_page" class="user-search">
        <el-form-item label="搜索：">
          <el-input size="small" v-model="ok_page.key" placeholder="请输入产品名字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button size="small" type="primary" icon="el-icon-plus" @click="create">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table size="small" :data="pagesData.list" highlight-current-row border element-loading-text="拼命加载中" style="width: 100%;">
        <el-table-column prop="title" label="名称" >
        </el-table-column>
        <el-table-column prop="intro" label="描述" >
          <template slot-scope="scope">
            {{textCut(scope.row.intro)}}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" align="center">
          <template slot-scope="scope">
            {{scope.row.price}}元/{{scope.row.unit}}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.status==0">
              <el-tag type="warning">未上架</el-tag>
            </div>
            <div v-if="scope.row.status==1">
              <el-tag >待审核</el-tag>
            </div>
            <div v-if="scope.row.status==5">
              <el-tag type="danger">审核失败</el-tag>
            </div>
            <div v-if="scope.row.status==9">
              <el-tag type="success">已上架</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="160">
          <template slot-scope="scope">
            <div class="ok-box-center">
              <el-button type="success" size="mini" @click="view(scope.row)">查看</el-button>
              <el-button type="primary" size="mini" @click="handleEdit(scope.row)" v-if="scope.row.status !== 1&&scope.row.status !== 9">编辑</el-button>
              <el-button type="primary" size="mini" @click="listingProduct(scope.row)" v-if="scope.row.status == 0">上架</el-button>
              <el-button type="primary" size="mini" @click="delistingProduct(scope.row)" v-if="scope.row.status == 9">下架</el-button>
              <el-button size="mini" type="danger" @click="deleteThis(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="line-20"></div>
    <!--    分页-->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pagesData.current"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesData.pageSize"
          layout="sizes, prev, pager, next"
          :total="pagesData.total">
      </el-pagination>
    </div>
    <div>
      <el-dialog :title="title" :visible.sync="editFormVisible" width="50%" @close="closeDialog">
        <div style="" >
          <el-form :model="formData" :rules="formDataRules" ref="form" label-width="100px" class="demo-ruleForm">
            <el-form-item label="名称" prop="title">
              <div class="ok-box-left">
                <el-input v-model="formData.title" style="width: 50%;"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="价格" prop="price">
              <div class="ok-box-left">
                <el-input v-model="formData.price" style="width: 50%;">
                  <template slot="append">元</template>
                </el-input>
              </div>
            </el-form-item>
            <el-form-item label="单位" prop="unit">
              <div class="ok-box-left">
                <el-input v-model="formData.unit" style="width: 50%;"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="图片" prop="image">
              <div class="ok-box-left">
                <el-upload class="avatar-uploader" action="http://localhost:8056/public/upload" :show-file-list="false"
                           :on-success="handleAvatarSuccess">
                  <img v-if="formData.image" :src="ok.tool.getImg(formData.image)" class="avatar" alt="">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input type="textarea" :rows="2" v-model="formData.address"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="intro">
              <el-input type="textarea" :rows="3" v-model="formData.intro"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="ok-box-center">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
        </div>
      </el-dialog>
    </div>

    <div>
      <el-drawer
          title="产品详情"
          :visible.sync="viewVisible">
        <div class="ok-box-left" v-if="viewVisible">
          <el-form :model="info" label-width="100px" class="demo-ruleForm">
            <el-form-item label="名称:">
              {{info.title}}
            </el-form-item>
            <el-form-item label="价格:">
              {{info.price}}元/{{info.unit}}
            </el-form-item>
            <el-form-item label="图片:">
              <img :src="ok.tool.getImg(info.image)" class="avatar" alt="">
            </el-form-item>
            <el-form-item label="状态:">
              <span v-if="info.status==0"><el-tag size="medium" type="warning">未上架</el-tag></span>
              <span v-if="info.status==1"><el-tag size="medium" >待审核</el-tag></span>
              <span v-if="info.status==5"><el-tag size="medium" type="danger">审核失败</el-tag></span>
              <span v-if="info.status==9"><el-tag type="success" size="medium">已上架</el-tag></span>
            </el-form-item>

            <el-form-item label="地址:" >
              {{info.address}}
            </el-form-item>
            <el-form-item label="描述:" >
              {{info.intro}}
            </el-form-item>
            <el-form-item label="编辑时间:" >
              {{ok.date.formatDateTime(info.updateTime)}}
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
<!--      <el-dialog title="查看" :visible.sync="viewVisible" width="50%" @click="closeThis">-->
<!--      </el-dialog>-->
    </div>

  </div>
</template>
<script>
import api from "@/api/manage"
import ok from "@/assets/ok";
import Cookies from "js-cookie";
export default {
  computed: {
    ok() {
      return ok
    }
  },
  data(){
    return{
      title:"编辑",
      editFormVisible:false,
      viewVisible:false,
      loading: false,
      ok_page:{
        key:"",
        pageSize:8,
        current:0
      },
      pagesData:{
        list:[],
        pageSize:0,
        current:0,
        total:0
      },
      data:{},
      formData:{
        id:"",
        title:"",
        intro:"",
        image:"",
        price:0,
        address:"",
        unit:"斤"
      },
      formDataRules:{
        title:  [
          { required: true, message: '请输产品名称', trigger: 'blur' },
        ],
        price: [
          { required: true, message: '请输入产品价格', trigger: 'blur' },
        ],
        unit: [
          { required: true, message: '请输入单位', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入产品地址', trigger: 'blur' }
        ],
        image: [
          { required: true, message: '请输入上传商品图片', trigger: 'blur' },
        ],
        intro: [
          { required: true, message: '请输入描述', trigger: 'blur' },
        ]
      },
      info:{},
    }
  },
  mounted() {
    this.data = this.formData
    this.getPage();
    this.checkLogin();
  },
  methods:{
    checkLogin(){
      if (!ok.tool.getStatus()){
        this.$router.push("/views/manage/login/loginHome")
      }
    },
    getPage(){
      api.getMyProduct(this.ok_page).then(res =>{
        this.pagesData = res.result;
      })
    },
    view(item){
      this.info = item;
      this.viewVisible = true;
    },
    handleEdit(item){
      this.title = "编辑"
      this.formData = item;
      this.editFormVisible = true;
    },
    deleteThis(item){
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.deleteProduct({id:item.id}).then(res =>{
          this.$message({
            message:"删除成功!",
            type:"success"
          });
          this.getPage();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    create(){
      this.title = "创建"
      this.editFormVisible = true;
    },
    closeThis(){
      this.viewVisible = false
    },
    search(){
      this.getPage();
    },
    submitForm(){
      this.$refs.form.validate((valid)=>{
        if (valid){
          let data = {...this.formData}
          this.$confirm('是否保存', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (this.formData.id){
              api.editProduct(data).then(res =>{
                this.$message({
                  message:"编辑成功!",
                  type:"success"
                });
                this.closeDialog();
                this.getPage();
                this.formData = this.data;
              })
            }else{
              api.createProduct(data).then(res =>{
                this.$message({
                  message:"创建成功!",
                  type:"success"
                });
                this.closeDialog();
                this.getPage();
                this.formData = this.data;
              });
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        }
      })

    },
    handleSizeChange(val){
      this.ok_page.pageSize = val;
      this.getPage();
    },
    handleCurrentChange(val){
      this.ok_page.current = val;
      this.getPage()
    },
    closeDialog(){
      this.editFormVisible = false;
      this.formData = this.data
    },
    handleAvatarSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      this.formData.image = res.result;
      console.log(this.formData.image);
    },
    textCut(item){
      if (item.length>15){
        item = item.slice(0,15)+"...";
      }
      return item
    },
    listingProduct(item){
      this.$confirm('是否上架此商品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.listingProduct({id:item.id}).then(res =>{
          this.$message.success("提交审核成功！");
          this.getPage();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });

    },
    delistingProduct(item){
      this.$confirm('是否下架此商品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.delistingProduct({id:item.id}).then(res =>{
          this.$message.success("下架成功！");
          this.getPage();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });

    }
  }
}
</script>
<style>
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px !important;
  text-align: center;
}
</style>
